<template>
    <div class="content">
        <div class="content-item">
            <div class="content-item-list">
                <span>综合榜</span>
                <span>熟练榜</span>
                <span>新锐榜</span>
                <span>最新</span>
            </div>

            <span class="content-item-last">筛选</span>
        </div>
        <div class="container">
            <div class="container-item">
                <div class="card-top">
                    <img src="../../image/banner3.jpg" alt="" />
                </div>
                <div class="card-bottom">
                    <div class="detail">
                        <div class="detail-title">
                            <div>
                                <span>作品</span>
                                <a href="">人世间</a>
                            </div>
                        </div>
                        <div class="detail-middle">
                            <span>53人浏览</span>
                        </div>
                        <div class="detail-bottom">
                            <span class="detail-bottom-list">
                                <img
                                    class="icon"
                                    src="../../image/dianzan.png"
                                    alt=""
                                />
                                <span>2</span>
                            </span>
                            <span class="detail-bottom-list">
                                <img
                                    class="icon"
                                    src="../../image/xiaoxi.png"
                                    alt=""
                                />
                                <span>2</span>
                            </span>
                            <span class="detail-bottom-list">
                                <img
                                    class="icon"
                                    src="../../image/shoucangjia.png"
                                    alt=""
                                />
                                <span>2</span>
                            </span>
                        </div>
                    </div>
                    <div class="info">
                        <div class="info-left">
                            <div class="info-left-img">
                                <img
                                    class="img-item"
                                    src="../../image/b1.png"
                                    alt=""
                                />
                            </div>
                            <span>欣欣爱跳舞</span>
                        </div>
                        <span class="info-right">11-03</span>
                    </div>
                </div>
            </div>
            <div class="container-item">
                <div class="card-top">
                    <img src="../../image/banner3.jpg" alt="" />
                </div>
                <div class="card-bottom">
                    <div class="detail">
                        <div class="detail-title">
                            <div>
                                <span>作品</span>
                                <a href="">人世间</a>
                            </div>
                        </div>
                        <div class="detail-middle">
                            <span>53人浏览</span>
                        </div>
                        <div class="detail-bottom">
                            <span class="detail-bottom-list">
                                <img
                                    class="icon"
                                    src="../../image/dianzan.png"
                                    alt=""
                                />
                                <span>2</span>
                            </span>
                            <span class="detail-bottom-list">
                                <img
                                    class="icon"
                                    src="../../image/xiaoxi.png"
                                    alt=""
                                />
                                <span>2</span>
                            </span>
                            <span class="detail-bottom-list">
                                <img
                                    class="icon"
                                    src="../../image/shoucangjia.png"
                                    alt=""
                                />
                                <span>2</span>
                            </span>
                        </div>
                    </div>
                    <div class="info">
                        <div class="info-left">
                            <div class="info-left-img">
                                <img
                                    class="img-item"
                                    src="../../image/b1.png"
                                    alt=""
                                />
                            </div>
                            <span>欣欣爱跳舞</span>
                        </div>
                        <span class="info-right">11-03</span>
                    </div>
                </div>
            </div>
            <div class="container-item">
                <div class="card-top">
                    <img src="../../image/banner3.jpg" alt="" />
                </div>
                <div class="card-bottom">
                    <div class="detail">
                        <div class="detail-title">
                            <div>
                                <span>作品</span>
                                <a href="">人世间</a>
                            </div>
                        </div>
                        <div class="detail-middle">
                            <span>53人浏览</span>
                        </div>
                        <div class="detail-bottom">
                            <span class="detail-bottom-list">
                                <img
                                    class="icon"
                                    src="../../image/dianzan.png"
                                    alt=""
                                />
                                <span>2</span>
                            </span>
                            <span class="detail-bottom-list">
                                <img
                                    class="icon"
                                    src="../../image/xiaoxi.png"
                                    alt=""
                                />
                                <span>2</span>
                            </span>
                            <span class="detail-bottom-list">
                                <img
                                    class="icon"
                                    src="../../image/shoucangjia.png"
                                    alt=""
                                />
                                <span>2</span>
                            </span>
                        </div>
                    </div>
                    <div class="info">
                        <div class="info-left">
                            <div class="info-left-img">
                                <img
                                    class="img-item"
                                    src="../../image/b1.png"
                                    alt=""
                                />
                            </div>
                            <span>欣欣爱跳舞</span>
                        </div>
                        <span class="info-right">11-03</span>
                    </div>
                </div>
            </div>
            <div class="container-item">
                <div class="card-top">
                    <img src="../../image/banner3.jpg" alt="" />
                </div>
                <div class="card-bottom">
                    <div class="detail">
                        <div class="detail-title">
                            <div>
                                <span>作品</span>
                                <a href="">人世间</a>
                            </div>
                        </div>
                        <div class="detail-middle">
                            <span>53人浏览</span>
                        </div>
                        <div class="detail-bottom">
                            <span class="detail-bottom-list">
                                <img
                                    class="icon"
                                    src="../../image/dianzan.png"
                                    alt=""
                                />
                                <span>2</span>
                            </span>
                            <span class="detail-bottom-list">
                                <img
                                    class="icon"
                                    src="../../image/xiaoxi.png"
                                    alt=""
                                />
                                <span>2</span>
                            </span>
                            <span class="detail-bottom-list">
                                <img
                                    class="icon"
                                    src="../../image/shoucangjia.png"
                                    alt=""
                                />
                                <span>2</span>
                            </span>
                        </div>
                    </div>
                    <div class="info">
                        <div class="info-left">
                            <div class="info-left-img">
                                <img
                                    class="img-item"
                                    src="../../image/b1.png"
                                    alt=""
                                />
                            </div>
                            <span>欣欣爱跳舞</span>
                        </div>
                        <span class="info-right">11-03</span>
                    </div>
                </div>
            </div>
            <div class="container-item">
                <div class="card-top">
                    <img src="../../image/banner3.jpg" alt="" />
                </div>
                <div class="card-bottom">
                    <div class="detail">
                        <div class="detail-title">
                            <div>
                                <span>作品</span>
                                <a href="">人世间</a>
                            </div>
                        </div>
                        <div class="detail-middle">
                            <span>53人浏览</span>
                        </div>
                        <div class="detail-bottom">
                            <span class="detail-bottom-list">
                                <img
                                    class="icon"
                                    src="../../image/dianzan.png"
                                    alt=""
                                />
                                <span>2</span>
                            </span>
                            <span class="detail-bottom-list">
                                <img
                                    class="icon"
                                    src="../../image/xiaoxi.png"
                                    alt=""
                                />
                                <span>2</span>
                            </span>
                            <span class="detail-bottom-list">
                                <img
                                    class="icon"
                                    src="../../image/shoucangjia.png"
                                    alt=""
                                />
                                <span>2</span>
                            </span>
                        </div>
                    </div>
                    <div class="info">
                        <div class="info-left">
                            <div class="info-left-img">
                                <img
                                    class="img-item"
                                    src="../../image/b1.png"
                                    alt=""
                                />
                            </div>
                            <span>欣欣爱跳舞</span>
                        </div>
                        <span class="info-right">11-03</span>
                    </div>
                </div>
            </div>
            <div class="container-item">
                <div class="card-top">
                    <img src="../../image/banner3.jpg" alt="" />
                </div>
                <div class="card-bottom">
                    <div class="detail">
                        <div class="detail-title">
                            <div>
                                <span>作品</span>
                                <a href="">人世间</a>
                            </div>
                        </div>
                        <div class="detail-middle">
                            <span>53人浏览</span>
                        </div>
                        <div class="detail-bottom">
                            <span class="detail-bottom-list">
                                <img
                                    class="icon"
                                    src="../../image/dianzan.png"
                                    alt=""
                                />
                                <span>2</span>
                            </span>
                            <span class="detail-bottom-list">
                                <img
                                    class="icon"
                                    src="../../image/xiaoxi.png"
                                    alt=""
                                />
                                <span>2</span>
                            </span>
                            <span class="detail-bottom-list">
                                <img
                                    class="icon"
                                    src="../../image/shoucangjia.png"
                                    alt=""
                                />
                                <span>2</span>
                            </span>
                        </div>
                    </div>
                    <div class="info">
                        <div class="info-left">
                            <div class="info-left-img">
                                <img
                                    class="img-item"
                                    src="../../image/b1.png"
                                    alt=""
                                />
                            </div>
                            <span>欣欣爱跳舞</span>
                        </div>
                        <span class="info-right">11-03</span>
                    </div>
                </div>
            </div>
            <div class="container-item">
                <div class="card-top">
                    <img src="../../image/banner3.jpg" alt="" />
                </div>
                <div class="card-bottom">
                    <div class="detail">
                        <div class="detail-title">
                            <div>
                                <span>作品</span>
                                <a href="">人世间</a>
                            </div>
                        </div>
                        <div class="detail-middle">
                            <span>53人浏览</span>
                        </div>
                        <div class="detail-bottom">
                            <span class="detail-bottom-list">
                                <img
                                    class="icon"
                                    src="../../image/dianzan.png"
                                    alt=""
                                />
                                <span>2</span>
                            </span>
                            <span class="detail-bottom-list">
                                <img
                                    class="icon"
                                    src="../../image/xiaoxi.png"
                                    alt=""
                                />
                                <span>2</span>
                            </span>
                            <span class="detail-bottom-list">
                                <img
                                    class="icon"
                                    src="../../image/shoucangjia.png"
                                    alt=""
                                />
                                <span>2</span>
                            </span>
                        </div>
                    </div>
                    <div class="info">
                        <div class="info-left">
                            <div class="info-left-img">
                                <img
                                    class="img-item"
                                    src="../../image/b1.png"
                                    alt=""
                                />
                            </div>
                            <span>欣欣爱跳舞</span>
                        </div>
                        <span class="info-right">11-03</span>
                    </div>
                </div>
            </div>
            <div class="container-item">
                <div class="card-top">
                    <img src="../../image/banner3.jpg" alt="" />
                </div>
                <div class="card-bottom">
                    <div class="detail">
                        <div class="detail-title">
                            <div>
                                <span>作品</span>
                                <a href="">人世间</a>
                            </div>
                        </div>
                        <div class="detail-middle">
                            <span>53人浏览</span>
                        </div>
                        <div class="detail-bottom">
                            <span class="detail-bottom-list">
                                <img
                                    class="icon"
                                    src="../../image/dianzan.png"
                                    alt=""
                                />
                                <span>2</span>
                            </span>
                            <span class="detail-bottom-list">
                                <img
                                    class="icon"
                                    src="../../image/xiaoxi.png"
                                    alt=""
                                />
                                <span>2</span>
                            </span>
                            <span class="detail-bottom-list">
                                <img
                                    class="icon"
                                    src="../../image/shoucangjia.png"
                                    alt=""
                                />
                                <span>2</span>
                            </span>
                        </div>
                    </div>
                    <div class="info">
                        <div class="info-left">
                            <div class="info-left-img">
                                <img
                                    class="img-item"
                                    src="../../image/b1.png"
                                    alt=""
                                />
                            </div>
                            <span>欣欣爱跳舞</span>
                        </div>
                        <span class="info-right">11-03</span>
                    </div>
                </div>
            </div>
            <div class="container-item">
                <div class="card-top">
                    <img src="../../image/banner3.jpg" alt="" />
                </div>
                <div class="card-bottom">
                    <div class="detail">
                        <div class="detail-title">
                            <div>
                                <span>作品</span>
                                <a href="">人世间</a>
                            </div>
                        </div>
                        <div class="detail-middle">
                            <span>53人浏览</span>
                        </div>
                        <div class="detail-bottom">
                            <span class="detail-bottom-list">
                                <img
                                    class="icon"
                                    src="../../image/dianzan.png"
                                    alt=""
                                />
                                <span>2</span>
                            </span>
                            <span class="detail-bottom-list">
                                <img
                                    class="icon"
                                    src="../../image/xiaoxi.png"
                                    alt=""
                                />
                                <span>2</span>
                            </span>
                            <span class="detail-bottom-list">
                                <img
                                    class="icon"
                                    src="../../image/shoucangjia.png"
                                    alt=""
                                />
                                <span>2</span>
                            </span>
                        </div>
                    </div>
                    <div class="info">
                        <div class="info-left">
                            <div class="info-left-img">
                                <img
                                    class="img-item"
                                    src="../../image/b1.png"
                                    alt=""
                                />
                            </div>
                            <span>欣欣爱跳舞</span>
                        </div>
                        <span class="info-right">11-03</span>
                    </div>
                </div>
            </div>
            <div class="container-item">
                <div class="card-top">
                    <img src="../../image/banner3.jpg" alt="" />
                </div>
                <div class="card-bottom">
                    <div class="detail">
                        <div class="detail-title">
                            <div>
                                <span>作品</span>
                                <a href="">人世间</a>
                            </div>
                        </div>
                        <div class="detail-middle">
                            <span>53人浏览</span>
                        </div>
                        <div class="detail-bottom">
                            <span class="detail-bottom-list">
                                <img
                                    class="icon"
                                    src="../../image/dianzan.png"
                                    alt=""
                                />
                                <span>2</span>
                            </span>
                            <span class="detail-bottom-list">
                                <img
                                    class="icon"
                                    src="../../image/xiaoxi.png"
                                    alt=""
                                />
                                <span>2</span>
                            </span>
                            <span class="detail-bottom-list">
                                <img
                                    class="icon"
                                    src="../../image/shoucangjia.png"
                                    alt=""
                                />
                                <span>2</span>
                            </span>
                        </div>
                    </div>
                    <div class="info">
                        <div class="info-left">
                            <div class="info-left-img">
                                <img
                                    class="img-item"
                                    src="../../image/b1.png"
                                    alt=""
                                />
                            </div>
                            <span>欣欣爱跳舞</span>
                        </div>
                        <span class="info-right">11-03</span>
                    </div>
                </div>
            </div>
        </div>
        <!-- 视频底部 -->

        <div class="content-bottom">
            <div class="bottom-button">
                <el-button
                    plain
                    v-loading.fullscreen.lock="fullscreenLoading"
                    type="primary"
                    @click="openFullScreen2"
                    >加载更多</el-button
                >
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElLoading } from 'element-plus'

const fullscreenLoading = ref(false)
const openFullScreen1 = () => {
    fullscreenLoading.value = true
    setTimeout(() => {
        fullscreenLoading.value = false
    }, 2000)
}

const openFullScreen2 = () => {
    const loading = ElLoading.service({
        lock: true,
        text: 'Loading',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    setTimeout(() => {
        loading.close()
    }, 2000)
}
</script>

<style lang="less" scoped>
.content {
    width: 1200px;
    height: 100%;
    margin-top: 20px;
    padding-bottom: 20px;
    margin: 0 auto;
    .content-item {
        height: 68px;
        display: flex;
        .content-item-list {
            width: 1117px;
            height: 68px;
            line-height: 68px;
            padding-left: 30px;
            span {
                color: #7d8090;
                padding-right: 60px;
            }
        }
        .content-item-last {
            display: inline-block;
            text-align: center;
            height: 68px;
            width: 68px;
            line-height: 68px;
        }
    }
    .container {
        width: 1220px;
        height: 100%;
        display: flex;
        flex-wrap: wrap;
        .container-item {
            width: 224px;
            height: 300px;
            display: flex;
            flex-direction: column;
            margin-right: 20px;
            background-color: #ffffff;
            margin-bottom: 20px;
            .card-top {
                width: 224px;
                height: 125px;
                display: flex;
            }
            .card-top img {
                width: 224px;
                height: 125px;
                border-radius: 5px;
            }
            .card-bottom {
                display: flex;
                flex-direction: column;

                .detail {
                    display: flex;
                    flex-direction: column;
                    border-bottom: 1px solid #ebeced;
                    padding: 0 10px 13px;

                    .detail-title {
                        width: 204px;
                        height: 45px;
                        padding: 10px 0 0;
                        span {
                            border: 1px solid;
                            border-radius: 5px;
                            font-size: 12px;
                            color: #202020;
                            margin: 0 6px 0 0;
                        }
                        a {
                            font-size: 14px;
                            color: #202020;
                        }
                    }
                    .detail-middle {
                        width: 204px;
                        height: 31px;
                        display: flex;
                        span {
                            font-size: 12px;
                            color: #7d8090;
                        }
                    }
                    .detail-bottom {
                        height: 31px;
                        line-height: 31px;
                        .icon {
                            width: 20px;
                            height: 20px;
                            color: #ebeced;
                        }
                        .detail-bottom-list span {
                            margin: 0 18px 0 5px;
                            color: #ebeced;
                        }
                    }
                }
                .info {
                    height: 50px;
                    line-height: 50px;
                    display: flex;
                    padding: 0 0 0 14px;
                    justify-content: space-between;
                    .info-left {
                        display: flex;
                        span {
                            color: #111111;
                            margin: 0 0 0 8px;
                            font-size: 12px;
                        }
                        .img-item {
                            width: 24px;
                            height: 24px;
                            border-radius: 50%;
                            padding-top: 13px;
                        }
                    }
                    .info-right {
                        color: #b1b5c1;
                        padding: 0 8px 0 0;
                        font-size: 12px;
                    }
                }
            }
        }
    }
    .content-bottom {
        width: 1200px;
        height: 60px;
        overflow: hidden;
        margin: 0 auto;
        padding: 0 0 20px;
        .bottom-button {
            width: 140px;
            height: 40px;
            margin: 20px auto;
        }
    }
}
</style>
